<template>
	<div>
		<div class="am-cf am-padding">
			<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">账单明细</strong> / <small>Electronic&nbsp;bill</small></div>
		</div>
		<hr>
		<div class="finance">
			<div class="financeText">
				<p>可用余额:<span>¥0.0</span></p>
				<p>账户状态:<span>有效</span></p>
				<a href="safety">安全中心：保护账户资产安全</a>
			</div>
		</div>

		<!--交易时间	-->

		<div class="order-time">
			<label class="form-label">交易时间：</label>
			<div class="show-input">
				<select class="am-selected" data-am-selected="" style="display: none;">
					<option value="today">今天</option>
					<option value="sevenDays" selected="">最近一周</option>
					<option value="oneMonth">最近一个月</option>
					<option value="threeMonths">最近三个月</option>
					<option class="date-trigger">自定义时间</option>
				</select>
				<div class="am-selected am-dropdown " id="am-selected-8kqli" data-am-dropdown=""> <button type="button" class="am-selected-btn am-btn am-dropdown-toggle am-btn-default">
						<span class="am-selected-status am-fl">最近一周</span> <i class="am-selected-icon am-icon-caret-down"></i>
					</button>
					<div class="am-selected-content am-dropdown-content">
						<h2 class="am-selected-header"><span class="am-icon-chevron-left">返回</span></h2>
						<ul class="am-selected-list">
							<li class="" data-index="0" data-group="0" data-value="today"> <span class="am-selected-text">今天</span> <i class="am-icon-check"></i></li>
							<li class="am-checked" data-index="1" data-group="0" data-value="sevenDays"> <span class="am-selected-text">最近一周</span>
								<i class="am-icon-check"></i></li>
							<li class="" data-index="2" data-group="0" data-value="oneMonth"> <span class="am-selected-text">最近一个月</span>
								<i class="am-icon-check"></i></li>
							<li class="" data-index="3" data-group="0" data-value="threeMonths"> <span class="am-selected-text">最近三个月</span>
								<i class="am-icon-check"></i></li>
							<li class="" data-index="4" data-group="0" data-value="自定义时间"> <span class="am-selected-text">自定义时间</span> <i
								 class="am-icon-check"></i></li>
						</ul>
						<div class="am-selected-hint"></div>
					</div>
				</div>
			</div>
			<div class="clear"></div>
		</div>

		<div class="walletList">

			<div class="walletTitle">
				<li class="time">创建时间
				</li>
				<li class="name">详情
				</li>
				<li class="amount">金额
				</li>
				<li class="balance">余额
				</li>
			</div>
			<div class="clear"></div>
			<div class="walletCont">
				<li class="cost">
					<div class="time">
						<p> 2016-03-12
						</p>
						<p class="text-muted"> 18:41
						</p>
					</div>
					<div class="title name">
						<p class="content">
							消费
						</p>
					</div>

					<div class="amount">
						<span class="amount-pay">-32.00</span>
					</div>
					<div class="balance">
						<span>余额：</span><em>0</em>
					</div>
				</li>

				<li>
					<div class="time">
						<p> 2016-03-06
						</p>
						<p class="text-muted"> 22:22
						</p>
					</div>
					<div class="title name">
						<p class="content">
							退款至钱包
						</p>
					</div>

					<div class="amount">
						<span class="amount-pay">+16.00</span>
					</div>
					<div class="balance">
						<span>余额：</span><em>32</em>
					</div>
				</li>

				<li class="cost">
					<div class="time">
						<p> 2016-02-28
						</p>
						<p class="text-muted"> 17:58
						</p>
					</div>
					<div class="title name">
						<p class="content">
							消费
						</p>
					</div>

					<div class="amount">
						<span class="amount-pay">-16.00</span>
					</div>
					<div class="balance">
						<span>余额：</span><em>16</em>
					</div>
				</li>

				<li class="cost">
					<div class="time">
						<p> 2016-02-14
						</p>
						<p class="text-muted"> 20:42
						</p>
					</div>
					<div class="title name">
						<p class="content">
							提现
						</p>
					</div>

					<div class="amount">
						<span class="amount-pay">-100.00</span>
					</div>
					<div class="balance">
						<span>余额：</span><em>32</em>
					</div>
				</li>

				<li>
					<div class="time">
						<p> 2016-02-02
						</p>
						<p class="text-muted"> 13:24
						</p>
					</div>
					<div class="title name">
						<p class="content">
							充值
						</p>
					</div>

					<div class="amount">
						<span class="amount-pay">+132.00</span>
					</div>
					<div class="balance">
						<span>余额：</span><em>132</em>
					</div>
				</li>
				<li class="cost">
					<div class="time">
						<p> 2016-01-30
						</p>
						<p class="text-muted"> 11:33
						</p>
					</div>
					<div class="title name">
						<p class="content">
							提现
						</p>
					</div>

					<div class="amount">
						<span class="amount-pay">-47.00</span>
					</div>
					<div class="balance">
						<span>余额：</span><em>0</em>
					</div>
				</li>
				<li class="cost">
					<div class="time">
						<p> 2016-01-30
						</p>
						<p class="text-muted"> 08:27
						</p>
					</div>
					<div class="title name">
						<p class="content">
							消费
						</p>
					</div>

					<div class="amount">
						<span class="amount-pay">-53.00</span>
					</div>
					<div class="balance">
						<span>余额：</span><em>47</em>
					</div>
				</li>
				<li>
					<div class="time">
						<p> 2016-01-28
						</p>
						<p class="text-muted"> 10:58
						</p>
					</div>
					<div class="title name">
						<p class="content">
							充值
						</p>
					</div>

					<div class="amount">
						<span class="amount-pay">+100.00</span>
					</div>
					<div class="balance">
						<span>余额：</span><em>100</em>
					</div>
				</li>
			</div>

			<!--分页-->
			<ul class="am-pagination am-pagination-right">
				<li class="am-disabled"><a href="#">«</a></li>
				<li class="am-active"><a href="#">1</a></li>
				<li><a href="#">2</a></li>
				<li><a href="#">3</a></li>
				<li><a href="#">4</a></li>
				<li><a href="#">5</a></li>
				<li><a href="#">»</a></li>
			</ul>

		</div>

	</div>
</template>

<script>
	require('amazeui/dist/js/amazeui.min.js')

	export default {
		name: 'HelloWorld',
		props: {
			msg: String
		},
		mounted() {


		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
	@import url("~@/assets/css/wallet.css");
</style>
